<template>
  <!-- 智能 -->
  <div class="intelligence-page">
    <!-- 轮播图 -->
    <div class="intelligence-swipe">
      <van-swipe :autoplay="3000" lazy-render indicator-color="white">
        <van-swipe-item v-for="image in images" :key="image">
          <router-link to="/">
            <img :src="image" />
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 爆款新品列表 -->
    <ul class="intell-nav-list">
      <li class="intell-nav-item" v-for="item in intellList" :key="item">
        <router-link to="/">
          <img :src="item.imgUrl" alt="" />
        </router-link>
      </li>
    </ul>

    <div class="intell-content">
      <!-- 热卖爆品 -->
      <div class="hot-products">
        <router-link to="/">
          <img
            src="@/assets/images/home/intelligence/hot-products.webp"
            alt=""
          />
        </router-link>
      </div>

      <!-- 新品速递 -->
      <div class="new-products">
        <router-link to="/">
          <img
            src="@/assets/images/home/intelligence/new-products.jpg"
            alt=""
          />
        </router-link>
      </div>

      <div class="hot-list-container">
        <intelligenceList :intell_num1="0" :intell_num2="9"></intelligenceList>
      </div>

      <div class="hot-list-container">
        <h2>小家电</h2>
        <intelligenceList :intell_num1="0" :intell_num2="6"></intelligenceList>
      </div>

      <div class="hot-list-container">
        <h2>耳机音箱</h2>
        <intelligenceList :intell_num1="0" :intell_num2="3"></intelligenceList>
      </div>

      <div class="hot-list-container">
        <h2>品质灯具</h2>
        <intelligenceList :intell_num1="0" :intell_num2="3"></intelligenceList>
      </div>

      <div class="hot-list-container">
        <h2>便捷出行</h2>
        <intelligenceList :intell_num1="0" :intell_num2="3"></intelligenceList>
      </div>

      <div class="hot-list-container">
        <h2>个护清洁</h2>
        <intelligenceList :intell_num1="0" :intell_num2="3"></intelligenceList>
      </div>

      <div class="hot-list-container">
        <h2>儿童专区</h2>
        <intelligenceList :intell_num1="0" :intell_num2="3"></intelligenceList>
      </div>

      <div class="hot-list-container">
        <h2>配件耗材</h2>
        <intelligenceList :intell_num1="0" :intell_num2="3"></intelligenceList>
      </div>

      <div class="last-recommend">
        <router-link to="/">
          <van-image src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6c71c1c81edf64e2c13c137c2820805.jpg?f=webp"></van-image>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import intelligenceList from "./common/intelligenceList.vue";

export default {
  components: {
    intelligenceList,
  },
  setup() {
    // 轮播图
    const images = [
      require("@/assets/images/home/intelligence/in-swipe1.jpg"),
      require("@/assets/images/home/intelligence/in-swipe2.jpg"),
      require("@/assets/images/home/intelligence/in-swipe3.jpg"),
      require("@/assets/images/home/intelligence/in-swipe4.jpg"),
      require("@/assets/images/home/intelligence/in-swipe5.jpg"),
    ];

    // 列表
    const intellList = [
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },

      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
      {
        imgUrl:
          "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47dad0c224065a73a4c722eeaf1b8e1.jpg",
        url: "",
      },
    ];
    return { images, intellList };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.intelligence-page {
  width: 100%;
  overflow: hidden;
  top: 77px;
  padding-bottom: 50px;
  /* 轮播图 */
  .intelligence-swipe {
    .van-swipe {
      width: 375px;
      height: 186px;
      .van-swipe-item {
        a {
          display: block;
          img {
            width: 375px;
            height: 185px;
          }
        }
      }
    }
  }

  /* 列表 */
  .intell-nav-list {
    display: flex;
    flex-wrap: wrap;
    .intell-nav-item {
      display: block;
      flex: 1 1 auto;
      -webkit-box-flex: 1;
      height: 75px;
      a {
        height: 79px;
        width: 75px;
        img {
          width: 74px;
          height: 79px;
        }
      }
    }
  }

  .intell-content {
    /* 热卖爆品 */
    .hot-products,
    .new-products {
      a {
        img {
          height: 58px;
          width: 100%;
        }
      }
    }
    .new-products {
      margin-top: 10px;
    }

    .hot-list-container {
      overflow: hidden;
      h2 {
        padding: 12px 0;
        font-size: 21px;
        text-align: center;
      }
    }

    .last-recommend {
      padding-top: 10px;
      a {
        display: block;
        img {
          height: 144px;
        }
      }
    }
  }
}
</style>